<template>
	<view>
		<view style="width: 100%;height: 429rpx;box-sizing: border-box; padding: 114rpx 30rpx 0; background-color: #688517;">
			<view style="display: flex;align-items: center;">
				<image @click="backTo()" src="/static/waimai/返回@2x.png" style="width: 18rpx;height: 32rpx;margin-right:31rpx ;" mode="aspectFit"></image>
				<text style="font-size: 32rpx;color: #fff;margin-right: 310rpx;">美食店铺名称</text>
				<view style="display: flex;flex-direction: column;align-items: center;margin-right: 40rpx;">
					<image src="/static/waimai/收藏@2x.png" style="width: 35rpx;height: 34rpx;" mode="aspectFit"></image>
					<text style="font-size: 16rpx;color: #FFF;">收藏</text>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;">
					<image src="/static/waimai/分%20享%20(1)@2x.png" style="width: 35rpx;height: 34rpx;" mode="aspectFit"></image>
					<text style="font-size: 16rpx;color: #FFF;">分享</text>
				</view>
			</view>
		</view>
		<view style="width: 690rpx;height: 147rpx;border-radius: 14rpx;background-color: #fff;box-shadow: 0 0 5rpx 1rpx #F1F1F1; margin: -100rpx 30rpx;">
			<view style="padding: 30rpx;display: flex;align-items: center;justify-content: space-between;">
				<view style="display: flex;flex-direction: column;">
					<text class="title">藤椒抄手藤椒抄手藤椒抄手藤椒抄手藤椒抄手</text>
					<view style="display: flex;align-items: center;font-size: 22rpx;color: #666;">
						<text style="margin-right: 5rpx;color: #FF6F00;">{{ value }}分</text>
						<uni-rate @change="onChange" v-model="value" :value="5" :size="12" color="#ADC3D0" activeColor="#FF6F00" style="margin: 0 10rpx 0 5rpx;"></uni-rate>
						<text>1006条评论</text>
						<text style="margin: 0 10rpx;">|</text>
						<text>¥ 68/人</text>
					</view>
				</view>
				<view class="lx">
					<image src="/static/meishi/组%2013@2x(1).png" mode="aspectFit"></image>
					<image src="/static/meishi/组%2013@2x.png" style="margin-left: 30rpx;" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<uni-grid :column="4" :showBorder="false">
			<uni-grid-item v-for="(item, index) in mei" :key="index" style="margin-top: 130rpx;">
				<navigator :url="item.url">
					<view style="display: flex; flex-direction: column; align-items: center;">
						<image :src="`${item.icon}`" mode="aspectFit" style="width: 111rpx; height: 111rpx;"></image>
						<text style="color: #666666;font-size: 24rpx;margin-top: 5rpx;">{{ item.title }}</text>
					</view>
				</navigator>
			</uni-grid-item>
			<uni-grid-item v-for="(tab, index) in shi" :key="'a' + index" style="margin-top: -10rpx;">
				<navigator :url="tab.url">
					<view style="display: flex; flex-direction: column; align-items: center;">
						<image :src="`${tab.icon}`" mode="aspectFit" style="width: 111rpx; height: 111rpx;"></image>
						<text style="color: #666666;font-size: :;rpx;margin-top: 5rpx;">{{ tab.title }}</text>
					</view>
				</navigator>
			</uni-grid-item>
		</uni-grid>
		<view style="height: 20rpx;background-color: #f7f7f7;"></view>
		<scroll-view scroll-y="true" scroll-left="30rpx" style="display: inline-block;white-space: nowrap;padding-left: 30rpx;">
			<view>
				<text style="font-size: 30rpx;color: #1B1B1B;display: block;margin-top: 30rpx;">推荐美食</text>
				<view style="display: flex;">
					<view style="display: flex;margin-top: 30rpx;">
						<view style="width: 168rpx;height: 168rpx;border-radius: 10rpx;background-color: #F7F7F7;display: flex;align-items: center;justify-content: center;">
							<image src="" style="background-color: #707895; width: 136rpx;height: 105rpx;" mode="aspectFill"></image>
						</view>
						<view style="margin-left: 20rpx;margin-top: -20rpx;">
							<view style="display: flex;line-height: 40rpx; flex-direction: column;font-size: 24rpx;color: #999999;">
								<text style="font-size: 30rpx;color: #1B1B1B;margin-top: 14rpx;">好多个柠檬</text>
								<text style="width: 354rpx; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
									好吃水份多又大的柠檬正宗柠檬好吃水份多又大的柠檬正宗柠檬
								</text>
								<view style="display: flex;">
									<text>月售 256</text>
									<text>好评率100%</text>
								</view>
							</view>
							<view style="display: flex;align-items: center;	margin-top: 15rpx;">
								<view>
									<text style="font-size: 24rpx;color: #F61B00;">¥</text>
									<text style="font-size: 36rpx;color: #F61B00;">14.5</text>
									<text style="font-size: 24rpx;color: #B4B4B4;text-decoration: line-through;">¥20.5</text>
								</view>
								<text
									style="margin-left: 220rpx; display: flex;align-items: center;justify-content: center; width: 120rpx;height: 46rpx;background-color: #FFD333;border-radius: 23rpx;color: #1B1B1B;font-size: 24rpx;"
								>
									抢购
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			mei: [
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/组 13@2x(2).png', title: '拼团商品', url:'/pages/group/group' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/组 13@2x(9).png', title: '全部菜品', url:'/pages/dishes/dishes' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/组 13@2x(3).png', title: '外卖', url:'/pages/waim/waim' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/组 13@2x(4).png', title: '社区团购', url:'/pages/shequ/shequ' }
			],
			shi: [
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/组 13@2x(7).png', title: '优惠券', url: '/pages/coupons/coupons' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/组 13@2x(6).png', title: '店铺评价', url: '/pages/evaluation/evaluation' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/组 13@2x(5).png', title: '商家信息', url:'/pages/merchants/merchants' },
				{ icon: 'http://sxk.scztf.com/waimai_go/app_static/组 13@2x(8).png', title: '商家招聘', url:'/pages/recruitment/recruitment' }
			],
			value: 4.5
		};
	},
	methods:{
		backTo(){
			uni.navigateBack({
			    delta: 1,
			    animationType: 'pop-out',
			    animationDuration: 200
			});
		}
	}
};
</script>

<style lang="scss">
.lx image {
	width: 50rpx;
	height: 50rpx;
}
.title {
	width: 388rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #1b1b1b;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	margin-bottom: 10rpx;
}
</style>
